import React, {useContext, useEffect, useMemo, useState} from 'react';
import {Col, Row, Select, Spin, Tabs, Empty } from 'antd';
import {useTranslation} from 'react-i18next';

import RowCard from './component/RowCard';

import {getBusinessInfo} from '@src/services/supplier';
import {PublicDataStore} from '@src/store/PublicData/Provider';
import {duplicatesRemove} from '@src/utils/dataHandlingFunc';

import styles from './styles.module.less';
import * as Icons from '@ant-design/icons';


const Supplier = () => {
  const { t } = useTranslation();
  const { state } = useContext(PublicDataStore);

  const [companyInfo, setCompanyInfo] = useState(false);
  const [tabsActiveKeys, setTabsActiveKeys] = useState(1);
  const [selectCityKey, setSelectCityKey] = useState('');
  const [businessInfoData, setBusinessInfoData] = useState({
    business_server_list: [],
    total: 0
  });
  const [businessInfoDataLoading, setBusinessInfoDataLoading] = useState(false);

  const onTabsChange = (activeKey) => {
    setTabsActiveKeys(activeKey);
  }

  useEffect(() => {
    onGetBusinessInfo();
  }, [tabsActiveKeys, selectCityKey]);

  const onGetBusinessInfo = async () => {
    setBusinessInfoDataLoading(true);

    const res = await getBusinessInfo({
      business_id: tabsActiveKeys,
      city_id: selectCityKey
    });

    setBusinessInfoData(res);
    setBusinessInfoDataLoading(false);
  }

  const ConnectivityService = () => (
    <div className={styles.connectivity_service}>
      <div className={styles.title}>
        {businessInfoData?.business_server_list?.[0]?.server_name}
      </div>
      <div className={styles.desc}>
        {businessInfoData?.business_server_list?.[0]?.description}
      </div>
      <Row justify="space-between" align="bottom" style={{ marginTop: '20px' }}>
        <Col span={6}>
          <div className={styles.label}>{t('Service Address')}:</div>
        </Col>
        <Col span={18}>
          <div className={styles.select_city}>
            <Select placeholder={t('Select city')} onChange={setSelectCityKey} value={selectCityKey} allowClear>
              {
                duplicatesRemove(businessInfoData?.business_server_list || [], 'city_id')?.map(item => (
                  <Select.Option value={item.city_id} key={item.city_id}>{item?.city?.[sessionStorage.getItem('ai_lang')]}</Select.Option>
                ))
              }
            </Select>
          </div>
        </Col>
      </Row>

    </div>
  )

  const TabsMap = useMemo(() => {
    return state.allBusiness?.map(item => {
      const IconComponent = Icons[item.icon_name];
      return {
        label: (
            <span>
          {IconComponent && <IconComponent />} {t(item.business_name)}
        </span>
        ),
        key: item.business_id,
        children: (
            <Spin spinning={businessInfoDataLoading}>
              <div style={{ padding: '0 20%', background: 'linear-gradient(180deg,#f5f4f6,#e6ebf7)', minHeight: '100vh' }}>
                {(businessInfoData?.business_server_list?.length > 0) && ConnectivityService()}
                <RowCard setCompanyInfo={setCompanyInfo} businessInfoData={businessInfoData} />
                {
                  !businessInfoData?.business_server_list?.length && <Empty style={{ paddingTop: '20vh' }} />
                }
              </div>
            </Spin>
        ),
      };
    });
  }, [state.allBusiness, businessInfoData, businessInfoDataLoading, t]);


  return (
    <div className={styles.supplier_box}>
      <div className={styles.tabs_box}>
        <Tabs
          style={{ background: 'linear-gradient(180deg, #f0edf7 0.03%, #ebeaf5 32.19%, #e8e8f3 68.86%, #e4eaf7 99.12%)', itemColor: '#fff', itemActiveColor: '#fff' }}
          tabPosition='left'
          animated
          defaultActiveKey='Internet'
          onChange={onTabsChange}
          items={TabsMap}
          activeKey={tabsActiveKeys}
        />
      </div>
    </div>
  )
};

export default Supplier;